<!--  -->
<template>
  <div>
    <cu-custom
      :bgImage="bgImage"
      :needBack="true"
      bgColor="bgNormal"
      topTitle="通知公告详情"
      titleClass="commTitleWhite"
      backIconColor="#fff"
    ></cu-custom>
    <view class="content" :style="{ height: scorllContentHeight }">
      <view class="a">
        <view class="kind">通知公告</view>
        <image
          :src="detail.image.url"
          v-if="detail.image && detail.image.url"
          mode="aspectFit"
          @click="previewImage"
        />
        <view class="title">{{ detail.title }}</view>
        <rich-text class="context" :nodes="detail.detail"></rich-text>
      </view>
      <view class="documents">
        <view class="title">参考文件</view>
        <view class="">
          <view
            class="name"
            @click="previewWord(item)"
            v-for="(item, index) in detail.notificationFileList"
            ><image
              class="word"
              src="../../static/images/word.png"
              v-if="item.type == 'docx'"
            >
            </image
            ><image
              v-else
              src="../../static/images/workbench/pdf.png"
              class="word"
            >
            </image
            ><view class="filename">
              {{ item.fileName || item.original }}
            </view></view
          >
        </view>
      </view>
    </view>
  </div>
</template>

<script>
import { getNotificationDetail } from "@/api/home";
export default {
  data() {
    return {
      scorllContentHeight: "",
      detail: {},
    };
  },
  onLoad(options) {
    this.getDeatil(options);
  },
  onShow() {
    this.getHeight();
  },
  methods: {
    getDeatil(options) {
      getNotificationDetail(options.id).then((res) => {
        if (res.code == 200) {
          console.log(res);
          if (res.data.detail) {
            this.detail = res.data;
            if (res.data.detail.original.split(".")[1] === "pdf") {
              res.data.detail.type = "pdf";
            } else {
              res.data.detail.type = "docx";
            }
            this.detail.notificationFileList.push(res.data.detail);
          } else {
            this.detail = res.data;
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    getHeight() {
      this.scorllContentHeight = `calc(100vh - ${this.CustomBar}px - 24rpx - 20rpx)`;
    },
    previewWord(item) {
      uni.downloadFile({
        url: item.url,
        success: function (res) {
          console.log(res);
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log("打开文档成功");
            },
          });
        },
      });
    },
    previewImage() {
      uni.previewImage({
        current: 0,
        urls: [this.detail.image.url],
      });
    },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.content {
  background: #f2f2f2;
  font-size: 28rpx;
  color: #999;
  overflow-y: scroll;
  & > view.a {
    padding: 0rpx 40rpx 67rpx;
    background: #fff;
    .kind {
      font-size: 28rpx;
      color: #333333;
      height: 100rpx;
      line-height: 100rpx;
      border-bottom: 2rpx solid #f5f5f5;
    }
    .title {
      padding-top: 30rpx;
      color: #333;
      font-weight: 500;
      text-align: center;
    }

    .context {
      font-size: 26rpx;
      margin-top: 41rpx;
    }
  }
}
.documents {
  margin-top: 24rpx;
  background: #ffffff;
  // height: 97rpx;
  display: flex;
  padding: 0 40rpx;
  align-items: center;
  .title {
    // height: 97rpx;
    // line-height: 97rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
    white-space: nowrap;
  }
  .name {
    display: flex;
    align-items: center;
    margin-left: 18rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    padding-left: 40rpx;
    background-size: 30rpx 30rpx;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    .filename {
      width: 450rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.word {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}
</style>